<template>
	<view class="question-list">
		<view class="title">
			<text v-if="question.choiceStatus == 1">(多选)</text>
			<text v-if="question.choiceStatus == 0">(单选)</text>
			<text style="margin-left: 10rpx">{{ selQuestionIndex + 1 }}、{{ question.topic }}</text>
		</view>
		<view class="question-con">
			<radio-group v-if="question.choiceStatus == '0'" @change="radioChange" style="width: 100%">
				<label
					:class="index === current ? 'uni-list-cell uni-list-cell-pd custom-radio-item custom-radio-sel' : 'uni-list-cell uni-list-cell-pd custom-radio-item'"
					v-for="(item, index) in question.appraisalAnswers"
					:key="index"
				>
					<view class="radio-container">
						<!-- 隐藏原生radio -->
						<radio color="transparent" :value="item.answer" :checked="index === current" class="hidden-radio" />

						<!-- 自定义圆圈样式 -->
						<view class="custom-radio" :class="{ 'radio-checked': index === current }">
							<view v-if="index === current" class="radio-dot"></view>
						</view>
					</view>
					<view class="radio-label">{{ item.answer }}</view>
				</label>
			</radio-group>
			<checkbox-group v-if="question.choiceStatus == '1'" @change="checkboxChange">
				<label
					:class="hasSel(item.id) ? 'uni-list-cell uni-list-cell-pd custom-radio-item custom-radio-sel' : 'uni-list-cell uni-list-cell-pd custom-radio-item'"
					v-for="(item, index) in question.appraisalAnswers"
					:key="index"
				>
					<view class="radio-container">
						<!-- 隐藏原生radio -->
						<checkbox color="transparent" :value="item.answer" :checked="hasSel(item.id)" class="hidden-radio" />

						<!-- 自定义圆圈样式 -->
						<view class="custom-radio" :class="hasSel(item.id) ? 'radio-checked' : ''">
							<view v-if="hasSel(item.id)" class="radio-dot"></view>
						</view>
					</view>
					<view class="radio-label">{{ item.answer }}</view>
				</label>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		question: {
			type: Object,
			default: {}
		},
		selQuestionIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			items: [
				{
					value: 'USA',
					name: '美国',
					checked: 'true'
				}
			],
			current: -1,
			checkedList: []
		};
	},
	watch: {
		question: {
			handler(newVal, oldVal) {
				// console.log(newVal);
				if (newVal.choiceStatus === '0') {
					// console.log(newVal);
					if (newVal.selSingle) {
						const index = newVal.appraisalAnswers.findIndex((item) => item.id === newVal.selSingle);
						// console.log(index);
						this.current = index;
					} else {
						this.current = -1;
					}
				}
			},
			deep: true, // 启用深度监听
			immediate: true // 可选：立即执行一次回调
		}
	},
	methods: {
		radioChange(e) {
			const value = e.detail.value;
			const index = this.question.appraisalAnswers.findIndex((item) => item.answer === value);
			if (index !== -1) {
				this.current = index;
			}
			//单选点击
			this.$emit('singleNow', this.question.appraisalAnswers[index]);
			
			//清空掉current选择
			this.current = -1;
		},
		checkboxChange(e) {
			// console.log(e);
			const nameSet = new Set(e.detail.value);
			this.checkedList = this.question.appraisalAnswers.filter((obj) => nameSet.has(obj.answer)).map((obj) => obj.id);
			this.$emit('checkedNow', this.checkedList);
		},
		hasSel(id) {
			const set = new Set(this.checkedList);
			return set.has(id);
		}
	}
};
</script>

<style scoped lang="scss">
.question-list {
	width: 100%;
	padding: 30rpx 20rpx;

	.title {
		width: 100%;
		color: #000;
		font-size: 36rpx;
		font-weight: bold;
	}

	.question-con {
		width: 100%;

		::v-deep .uni-list-cell {
			// >view:last-child {
			// 	margin-left: 14rpx;
			// 	color: #000;
			// 	font-size: 34rpx;
			// }
		}

		/* 隐藏原生radio */
		.hidden-radio {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
		}

		/* 自定义radio容器 */
		.radio-container {
			position: relative;
			margin-right: 20rpx;
			margin-top: 6rpx;
		}

		/* 自定义未选中样式 */
		.custom-radio {
			width: 30rpx;
			height: 30rpx;
			border: 2rpx solid #ccc;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease;
		}

		/* 自定义选中样式 */
		.radio-checked {
			border-color: #5c83fd;
			/* 选中边框颜色 */
			background-color: transparent;
		}

		/* 自定义圆点（代替对号） */
		.radio-dot {
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #5c83fd;
			/* 圆点颜色 */
		}

		/* 布局调整 */
		.custom-radio-item {
			display: flex;
			align-content: space-between;
			width: 100%;
			display: flex;
			padding: 20rpx 30rpx;
			background-color: #f8f7ff;
			margin-top: 20rpx;
			border-radius: 10rpx;
			position: relative;
		}

		.radio-label {
			font-size: 32rpx;
			color: #333;
			width: calc(100% - 50rpx);
		}
		.custom-radio-sel {
			background-color: #c9e1ff;
		}
	}
}
</style>
